/*
The following variables will need to be provided
before including this file:

calbackUrl
uid
pid

*/

// Store the elements we will reference
var photoDiv = document.getElementById("photo");
var thePhoto = document.getElementById("thephoto");
var thePhotoLink = document.getElementById("thephoto_link");
var tagTarget = document.getElementById("tag_target");
var tagMessage = document.getElementById("tag_message");
var tagList = document.getElementById("photo_tags");

// Set the selector and note for a new tag
var newTag = null;
var selector = null;

// Add the listener to the target
tagTarget.addEventListener("click", tagClick);

// Whether or not to care about clicks
var listenForClick = false;
var tagging = false;

/**
 * Animate showing/hiding an element.
 * 
 * @author Brad Dougherty <bdougherty@gmail.com>
 * @param object target The element to animate
 */
function blind(target) {
	
	var element = document.getElementById(target);
	
	// Animate showing
	if (element.getStyle("display") == "none") {
		Animation(element).to("height", "auto").from("0px").to("opacity", 1).from(0).show().ease(Animation.ease.end).blind().go();
	}
	// Animate hiding
	else {
		Animation(element).to("height", "0px").to("opacity", 0).hide().ease(Animation.ease.end).blind().go();
	}
	
}

/**
 * Cancel the current tag by hiding and removing the
 * current tag and selector.
 * 
 * @author Brad Dougherty <bdougherty@gmail.com>
 */
function cancelTag() {
	// Hide the new tag and selector
	if (newTag) {
		newTag.addClassName("hide");
		photoDiv.removeChild(newTag);
		newTag = null;
	}
	if (selector) {
		selector.addClassName("hide");
		photoDiv.removeChild(selector);
		selector = null;
	}
	
	// Listen for clicks again
	listenForClick = true;
}

/**
 * Create a note with the specified info.
 * 
 * @author Brad Dougherty <bdougherty@gmail.com>
 * @param string id The ID for the note
 * @param int x The x position
 * @param int y The y position
 * @param int h The height
 * @param int w The width
 * @param string nameContent The content of the name
 */
function createNote(id, x, y, h, w, nameContent) {
	
	// Create the note div
	var note = document.createElement("div");
	note.setId(id+"_note");
	note.addClassName("note");
	note.setStyle({top: (y-7)+"px", left: (x-7)+"px", width: (w+2)+"px", height: (h+2)+"px"});
	
	// Create outer border
	var outer = document.createElement("div");
	outer.setId(id+"_outer");
	outer.addClassName("outerborder").addClassName("hide");
	
	// Create inner border
	var inner = document.createElement("div");
	inner.addClassName("innerborder");
	
	// Add event listener to note
	note.addEventListener("mouseover", showNameEvent);
	note.addEventListener("mouseout", hideNameEvent);
	
	// Combine note and attach
	outer.appendChild(inner);
	note.appendChild(outer);
	photoDiv.appendChild(note);
	
	// Create the name div
	var name = document.createElement("div");
	name.setId(id+"_name");
	name.addClassName("name").addClassName("hide");
	name.setStyle({width: w+"px", top: (y+h-20)+"px", left: x+"px"});
	name.setInnerXHTML("<span>"+nameContent+"</span>");
	photoDiv.appendChild(name);
	
}

/**
 * Hide the name when mousing-out from a note.
 * 
 * @author Brad Dougherty <bdougherty@gmail.com>
 * @param event evt The mouseout event
 */
function hideNameEvent(evt) {
	var id = evt.target.getId();
	id = id.replace("note", "name");
	document.getElementById(id).addClassName("hide");
}

/**
 * Hide the note associated with the specified ID.
 * 
 * @author Brad Dougherty <bdougherty@gmail.com>
 * @param string userid The ID for the note
 */
function hideNote(userid) {
	var note = document.getElementById(userid + "_outer");
	if (note) {
		note.addClassName("hide");
	}
}

function removeNote(noteid) {
	var note = document.getElementById(noteid + "_note");
	var name = document.getElementById(noteid + "_name");
	//if (note) {
		photoDiv.removeChild(note);
	//}
	//if (name) {
		photoDiv.removeChild(name);
	//}
}

/**
 * Posts the tag page to remove the specified tag.
 * 
 * @author Brad Dougherty <bdougherty@gmail.com>
 * @param string tagid The ID of the tag
 * @param string token The generated token for the tag
 */
function removeTag(tagid, noteid, token, noteDivId) {

	// Generate the URL
	var url = callbackUrl + "/tag_photo.php";
	var params = {"remove": 1, "uid": uid, "pid": pid, "tagid": tagid, "noteid": noteid, "token": token};

	// Create the ajax object and make the call
	var removeAjax = new Ajax();
	removeAjax.responseType = Ajax.FBML;
	removeAjax.ondone = function(data) {
		if (data.success == 0) {
			showDialog(data);
		}
		else {
			tagList.setInnerFBML(data);
			removeNote(noteDivId);
		}
	}
	removeAjax.post(url, params);
	
}

/**
 * Show a pop-up dialog.
 * 
 * @author Brad Dougherty <bdougherty@gmail.com>
 * @param json data A json encoded array with title, fbml_content, and button
 */
function showDialog(data) {
	var dialog = new Dialog(Dialog.DIALOG_POP);
	dialog.showMessage(data.title, data.fbml_content, data.button);
	dialog.onconfirm = function() {
		dialog.hide();
	};
}

/**
 * Show the name for the moused-over note.
 * 
 * @author Brad Dougherty <bdougherty@gmail.com>
 * @param event evt The mouseover event
 */
function showNameEvent(evt) {
	var id = evt.target.getId();
	id = id.replace("note", "name");
	document.getElementById(id).removeClassName("hide");
}

/**
 * Show the note associated with the specified ID.
 * 
 * @author Brad Dougherty <bdougherty@gmail.com>
 * @param string userid The ID for the note
 */
function showNote(userid) {
	var note = document.getElementById(userid + "_outer");
	if (note) {
		note.removeClassName("hide");
	}
}

/**
 * Begin tagging the photo.
 * 
 * @author Brad Dougherty <bdougherty@gmail.com>
 */
function startTagging() {
	if (!tagging) {
		
		// Show the target and tell it to listen for clicks
		tagTarget.removeClassName("hide");
		listenForClick = true;
		tagging = true;

		// Animate the message
		Animation(tagMessage).to("height", "auto").from("0px").to("opacity", 1).from(0).show().ease(Animation.ease.end).blind().duration(250).go();
		
	}
}

/**
 * End tagging the photo.
 * 
 * @author Brad Dougherty <bdougherty@gmail.com>
 */
function stopTagging() {
	if (tagging) {
		
		// Hide the selector and new tag if present.
		cancelTag();
		tagging = false;

		// Hide the target and message
		tagTarget.addClassName("hide");
		Animation(tagMessage).to("height", "0px").to("opacity", 0).hide().ease(Animation.ease.end).blind().duration(250).go();
		
		// Move the photo back on IE
		photoDiv.setStyle("position", "static");
		photoDiv.setStyle("position", "relative");
		
	}
}

/**
 * Post the information for a new tag and note to the tag page.
 * 
 * @author Brad Dougherty <bdougherty@gmail.com>
 */
function submitTag() {
	
	// Get the form and serialize the parameters
	var form = document.getElementById("tag_form");
	var params = form ? form.serialize() : null;

	// Generate the URL
	var url = callbackUrl + "/tag_photo.php";

	// Create the ajax object and make the call
	var addAjax = new Ajax();
	addAjax.responseType = Ajax.JSON;
	addAjax.ondone = function(data) {
		tagReturn(data);
	};
	addAjax.post(url, params);
	
	// Hide the tag and selector
	cancelTag();
	
}

/**
 * Handle clicks on the target.
 * 
 * @author Brad Dougherty <bdougherty@gmail.com>
 * @param event evt The click event
 */
function tagClick(evt) {
	if (listenForClick) {
		
		// Get the dimensions
		var tagWidth = 150;
		var photoWidth = thePhoto.getOffsetWidth() - 2;
		var photoHeight = thePhoto.getOffsetHeight() - 2;

		// Get the location of the actual click
		var clickX = evt.pageX - tagTarget.getAbsoluteLeft() - 1;
		var clickY = evt.pageY - tagTarget.getAbsoluteTop() - 1;
		
		var posX = clickX - (tagWidth / 2) - 4;
		var posY = clickY - (tagWidth / 2) - 4;
		
		if (posX < -7) { // Left
			posX = -7;
		}
		if (posY < -7) { // Top
			posY = -7;
		}
		if (posX > photoWidth - tagWidth) { // Right
			posX = photoWidth - tagWidth - 3;
		}
		if (posY > photoHeight - tagWidth) { //Bottom
			posY = photoHeight - tagWidth - 3;
		}
		
		/* Make sure the location is over top of the photo
		if (clickX < (tagWidth / 2)) { // Left
			clickX = (tagWidth / 2) - 7;
		}
		if (clickX > photoWidth - (tagWidth / 2)) { // Right
			clickX = photoWidth - (tagWidth / 2) - 3;
		}
		if (clickY < (tagWidth / 2)) { // Top
			clickY = (tagWidth / 2) - 7;
		}
		if (clickY > photoHeight - (tagWidth / 2)) { // Bottom
			clickY = photoHeight - (tagWidth / 2) - 3;
		}

		// Figure out where to place the tag box
		var posX = clickX - (tagWidth / 2) - 4 + "px";
		var posY = clickY - (tagWidth / 2) - 4 + "px";
		
		*/
		
		if (posX + (tagWidth / 2) + 200 > photoWidth) { // Show on left
			var selectorPosX = posX - 210;
		}
		else {
			var selectorPosX = posX + tagWidth + 20;
		}
		
		/*
		if (clickX + (tagWidth / 2) + 202 > photoWidth) {
			var selectorPosX = clickX - (tagWidth / 2) - 210 + "px";
		}
		else {
			var selectorPosX = clickX + (tagWidth / 2) + 20 + "px";
		} */
		
		// Create a div to show the new tag
		newTag = document.createElement("div");
		newTag.setStyle({top: posY+"px", left: posX+"px", width: tagWidth+"px", height: tagWidth+"px"});
		newTag.addClassName("note");
		var outer = document.createElement("div");
		outer.addClassName("outerborder");
		var inner = document.createElement("div");
		inner.addClassName("innerborder");
		outer.appendChild(inner);
		newTag.appendChild(outer);
		photoDiv.appendChild(newTag);

		// Create element with friend selector
		selector = document.createElement("div");
		selector.setInnerFBML(selectorText);
		selector.setStyle({top: posY+"px", left: selectorPosX+"px"});
		selector.addClassName("tag_friend_selector");
		photoDiv.appendChild(selector);
		
		// Set the form values with the click info
		document.getElementById("tag_x").setValue(posX+7);
		document.getElementById("tag_y").setValue(posY+7);

		// Stop looking for clicks until they select a person
		listenForClick = false;
		
	}
}

/**
 * Handle the return data from the tag page. If there was an error,
 * show a dialog with info. If the tag was added correctly, create
 * the note and update the list of tagged users.
 * 
 * @author Brad Dougherty <bdougherty@gmail.com>
 * @param json data A json encoded array with the note info
 */
function tagReturn(data) {
	if (data.success == 1) {
		createNote(data.id, data.noteX, data.noteY, data.noteH, data.noteW, data.nameContent);
		updateTagList();
	}
	else if (data.success == 0) {
		showDialog(data);
	}
}

/**
 * Query the tag page to update the list of tagged users.
 * 
 * @author Brad Dougherty <bdougherty@gmail.com>
 */
function updateTagList() {
	var tagsAjax = new Ajax();
	tagsAjax.responseType = Ajax.FBML;
	tagsAjax.ondone = function(data) {
		tagList.setInnerFBML(data);
		tagList.removeClassName("hide");
	}
	tagsAjax.post(callbackUrl + "/tag_photo.php?uid=" + uid + "&pid=" + pid + "&refresh");
}